<template>
  <div class="searchAd-view clear">
    <div class="clear">
      <div class="left">
        <slot name="left"></slot>
      </div>
      <div class="right">
        <zz-search
          v-show="!isAd"
          :holder="holder"
          @searchClick="searchInputHandle"></zz-search>
        <div style="margin-left: 10px;" v-if="!alwaysOpen">
          <button class="button-line" v-if="isAd" @click="searchAd">普通搜索</button>
          <button class="button-line" v-else @click="searchAd">高级搜索</button>
          <slot name="right"></slot>
        </div>
      </div>
    </div>

    <div class="searchAd-con" v-show="isAd">
      <div class="searchAd-table" style="padding-left: 0">
        <div class="searchAd-cell searchAd-list">
          <div v-for="(item,index) in searchCom"  :style="{width: `${item.width}%`}">
            <div class="searchAd-table">
              <div class="searchAd-cell cell-left" :style="{width: `${item.titleW}px`}">{{item.name}}</div>
              <div class="searchAd-cell" v-if="item.type === 'input'">
                <input
                  @blur="inputHandle($event, item)"
                  ref="searchInput"
                  class="input-l"
                  style="width: 100%;">
              </div>
              <div class="searchAd-cell relative" v-if="item.type === 'plus'">
                <input class="input-l model_box" style="width: 100%;" v-model="item.model" disabled>
                <i class="iconfont icon-plus pointer" @click="plugHandle(item)" style="position:absolute; right: 8px; top: 0;"></i>
              </div>
              <div class="searchAd-cell" v-if="item.type === 'auto'">
                <zz-auto
                  style="width:100%;"
                  :label = item.label
                  :query = item.from
                  :constant = item.constant
                  :url = item.url
                  :isBorder = "true"
                  :data = item
                  :onSelect = "autoHandle">
                </zz-auto>
              </div>
              <div class="searchAd-cell" v-if="item.type === 'select'">
                <zz-select
                  style="width: 100%"
                  :all = true
                  :options= "{width: '100%'}"
                  :border = true
                  :option="item.selectOption"
                  :name= item.selectPlace
                  :chooseDefault="resetPlace"
                  :data="item"
                  @optionClick="optionHandle"></zz-select>
              </div>
              <div class="searchAd-cell" v-if="item.type === 'retrieve'">
                <zz-retrieve
                  conWidth="100%"
                  :isChooseDepart = false
                  :isFriend = false
                  :singleCheck = true
                  :isWorker = false
                  :multiple = false
                  :isTip="false"
                  :rId = item.rId
                ></zz-retrieve>
              </div>
              <div class="searchAd-cell" v-if="item.type === 'department'">
                <zz-retrieve
                  conWidth="100%"
                  :rId = item.rId
                  :openEmployees = false
                  :isFriend = false
                  :isWorker = false
                  :multiple = false
                  :isTip="false"
                ></zz-retrieve>
              </div>
              <div class="searchAd-cell" v-if="item.type === 'area'">
                <zz-areaPicker
                  @province="provinceHandle"
                  @city="cityHandle"
                  @area="areaHandle"
                  :resetPlace="resetPlace"
                  :optionData="item"
                  :province="searchProvince"
                  :city="searchCity"
                  :area="searchArea"></zz-areaPicker>
              </div>
              <div class="searchAd-cell" v-if="item.type === 'dateScope'">
                <zz-date
                  v-for="element in item.children"
                  :style="{width: `${100 / item.children.length - 2}%`}"
                  :key="element.type"
                  :place="element.name"
                  :dateSouce="element"
                  :resetPlace="resetPlace"
                  inputClass="date-full"
                  :type="element.dateType? element.dateType:'day'"
                  @change="dateCallBack" ></zz-date>
              </div>
              <div class="searchAd-cell" v-if="item.type === 'moneyScope'">
                <input
                  @blur="inputHandle($event, el)"
                  ref="searchInput"
                  :placeholder="el.name"
                  v-for="(el, i) in item.children"
                  style="width: 48%"
                  class="input-l">
              </div>
              <div class="searchAd-cell" v-if="item.type === 'check'">
                <zz-check
                  style="margin-top: 6px"
                  :data = item
                  @handleChange="handleChange"
                  :checkTip="item.checkTip"
                  :checkDefault = 'checkDefault'
                  :check="false"></zz-check>
              </div>
            </div>
          </div>
        </div>
        <div class="searchAd-cell searchAd-right"></div>
      </div>
      <div class="searchAd-but">
        <button class="empty" @click="emitEmpty">清空</button>
        <button class="search" @click="searchHandle">搜索</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'zz-searchAd',
    data () {
      return {
        show: false,
        isAd: false,
        resetPlace: 0,
        searchProvince: '省',
        searchCity: '市',
        searchArea: '区',
        site: {
          province: null,
          city: null,
          area: null
        },
        state: false,
        checkDefault: 0
      }
    },
    watch: {
      alwaysOpen: function (to) {
        this.isAd = to
      }
    },
    props: {
      searchCom: {
        type: Array
      },
      holder: {
        type: String,
        default: '输入搜索条件'
      },
      alwaysOpen: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      searchAd () {
        this.isAd === true ? this.isAd = false : this.isAd = true
        if (!this.isAd) {
          this.empty()
          this.searchHandle()
        }
      },
      searchHandle () {
        this.$emit('confirm')
      },
      searchInputHandle (val) {
        this.$emit('confirmInput', val)
      },
      inputHandle (e, item) {
        this.$emit('search', {
          value: e.target.value.trim(),
          type: item.query
        })
        this.$emit('handle', {
          value: e.target.value.trim(),
          type: item.query
        })
      },
      dateCallBack (val, data) {
        this.$emit('search', {
          value: val,
          type: data.query
        })
      },
      optionHandle (data) {
        this.$emit('search', {
          value: data.key,
          type: data.value.query
        })
      },
      provinceHandle (data) {
        if (data.value === '省') {
          return
        }
        this.$emit('search', {
          value: data.value,
          type: data.children[0].query
        })
      },
      cityHandle (data) {
        if (data.code) {
          this.$emit('search', {
            value: data.value,
            type: data.children[1].query
          })
        }
      },
      areaHandle (data) {
        if (data.code) {
          this.$emit('search', {
            value: data.value,
            type: data.children[2].query
          })
        }
      },
      autoHandle (data) {
        this.$emit('search', {
          value: data.value,
          type: data.query
        })
      },
      plugHandle (item) {
        this.$emit('dialog', item)
      },
      empty () {
        if (this.$refs.searchInput) {
          this.$refs.searchInput.forEach(x => {
            x.value = ''
          })
        }
        this.searchProvince = '省'
        this.searchCity = '市'
        this.searchArea = '区'
        this.resetPlace++
        this.checkDefault++
        this.$store.commit('reset')
        this.searchCom.forEach(x => {
          if (x.query) {
            this.$emit('search', {
              value: '',
              type: x.query
            })
          }
          if (x.children) {
            x.children.forEach(y => {
              if (y.query) {
                this.$emit('search', {
                  value: '',
                  type: y.query
                })
              }
            })
          }
        })
      },
      emitEmpty () {
        this.empty()
        this.$emit('empty')
      },
      handleChange (data) {
        this.$emit('search', {
          value: data.state,
          type: data.value.query
        })
      }
    }
  }
</script>

<style lang="scss">
  .searchAd-view{
    line-height: 30px;
    border-bottom: 1px $color-line solid;
    padding: 10px 20px;
    .right{
      >div{
        float: left;
      }
    }
    .searchAd-con{
      border: 1px solid $color-line;
      border-radius: 3px;
      margin-top: 12px;
      padding: 0 20px 20px 20px;
      .searchAd-table{
        display: table;
        table-layout: fixed;
        box-sizing: border-box;
        padding-left: 5px;
        width: 100%;
        .searchAd-cell{
          display: table-cell;
          position: relative;
          vertical-align:top;
          .icon-plus{
            top: 1px;
          }
          .cell-left{
            text-align: right;
            padding-right: 10px;
          }
          .cov-vue-date{
            margin-right: 4%;
            &:last-child{
              margin-right: 0;
            }
          }
          .input-l{
            margin-right: 4%;
            &:last-child{
              margin-right: 0;
            }
          }
        }
      }
      .searchAd-list{
        >div{
          float: left;
          margin: 20px 0 0 0;
          height: 30px;
          &:last-child{
            margin-right: 0;
          }
        }
      }
      .searchAd-right{
        width: 150px;
      }

      .searchAd-but{
        text-align: right;
        .empty{
          @include button-b(#b3bec4);
          width: 70px;
        }
        .search{
          @include  button-b();
          width: 70px;
        }
      }
      .model_box{
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>
